<!DOCTYPE html>
<title>SVG icon loader</title>
<style>
button {
	padding: 2px;
	margin: 5px;
	display: block;
	float: left;
	width: 48px;
	height: 48px;
}

#buttons {
	clear: both;
	float: none;
	overflow: auto;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.svgicons.js"></script>

<script>

$(function() {

	$.svgIcons('images/icons.svgz', {
		w:32, h:32,
		fallback_path:'images/',
		fallback:{
			'square':'square.png',
			'circle':'circle.png',
			'pencil':'path.png',
			'text':'text.png'
		},
		placement: {
			'.test':'circle'
		},
		callback: function(icons) {
			var sq2 = icons['square'].clone();
			$('#square2').append(sq2);
		}
	});
});

</script>

<body>

<h1>SVG icon loader</h1>

<div id="content">
	<p>This page loads multiple SVG icons using just one file.</p>
	
	<div id="buttons">
		<button id="square"></button>
		<button id="circle"></button>
		<button id="pencil"></button>
		<button id="text"></button>
		<button class="test"></button>
		<button class="test"></button>
		<button id="square2"></button>
		<button class="test"></button>
	</div>

	<h2>Pros:</h2>
	<ol>
		<li>Fewer HTTP requests allows for faster loading</li>
		<li>Using one SVGZ file for multiple images allows for great compression</li>
		<li>SVG markup easily pasted into the master SVG file, much easier than dealing with sprite PNGs</li>
		<li>Uses IMG elements for icons when available to reduce DOM nodes used</li>
	</ol>
	
	<h2>Cons:</h2>
	<ol>
		<li>Extra time required to process the single file</li>
		<li>SVGZ support not always available on some servers (regular SVG works, but loses compression advantage)</li>
	</ol>
	
	<p><a href="http://code.google.com/p/svg-icon-loader/">SVG Icon Loader</a> was created by <a href="http://a.deveria.com">Alexis Deveria</a></p>
</div>
</body>